<template>
  <div class="popupMask">
    <div class="popupPenal">
      <div class="popPenalTitle">
        <div class="popPenalTitleName">
          打印样品标签
        </div>
        <div class="popupClose" v-on:click="close">
          <el-button size="mini">关闭</el-button>
        </div>
      </div>
      <div class="penalContent">
        <div>
          <el-table :data="pinrtData" style="width: 100%" size="mini" border>
            <el-table-column property="yangpin" label="编号" min-width="70px">
            </el-table-column>
            <el-table-column property="jiancedian" label="名称" min-width="50px">
            </el-table-column>
            <el-table-column property="caiyangriqi" label="采样日期" min-width="100px">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.caiyangriqi"></el-input>
              </template>
            </el-table-column>
            <el-table-column property="dayinshu" label="打印数量" min-width="100px">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.dayinshu" size="mini" :min="1" :max="10"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="采样人" min-width="250px">
              <template slot-scope="scope">
                <el-select v-model="scope.row.caiyanren" multiple placeholder="请选择" size="mini" style="    width: 100%;">
                  <el-option v-for="item in caiyangrenData" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="检测项目" min-width="250px">
              <template slot-scope="scope">
                <el-select v-model="scope.row.jiancexiagmu" multiple placeholder="请选择" size="mini" style="    width: 100%;">
                  <el-option v-for="item in jiancexiangmu" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
          这里的采样人都是默认由任务配置里带出，采样人可自行删减。
          <br> 标签数量是下任务时设置的采样瓶数总和，也可自行增减。
          <div>
            标签预览：
            <img src="../../../../assets/img/biaoqian.png">
          </div>
        </div>
      </div>
      <div class=" penalFooter">
        <el-button class="penalButton" type="primary" size="mini" v-on:click="close">打印</el-button>
        <el-button class="penalButton" size="mini" v-on:click="close">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    data() {
      return {
        yesornoValue: '1',
        enableStatusValue: '1',
        pinrtData: [
          {
            yangpin: 'HJ2018001001',
            jiancedian: '监测点一',
            dayinshu: '4',
            caiyanren: ['001', '002', '003', '004', '005'],
            jiancexiagmu: ['001', '002', '003', '004', '005'],
            caiyangriqi: '',
          },
          {
            yangpin: 'HJ2018001001',
            jiancedian: '监测点一',
            dayinshu: '4',
            caiyanren: ['001', '002', '003', '004', '005'],
            jiancexiagmu: ['001', '002', '003', '004', '005'],
            caiyangriqi: '',
          },
          {
            yangpin: 'HJ2018001001',
            jiancedian: '监测点一',
            dayinshu: '4',
            caiyanren: ['001', '002', '003', '004', '005'],
            jiancexiagmu: ['001', '002', '003', '004', '005'],
            caiyangriqi: '',
          },
          {
            yangpin: 'HJ2018001001',
            jiancedian: '监测点一',
            dayinshu: '4',
            caiyanren: ['001', '002', '003', '004', '005'],
            jiancexiagmu: ['001', '002', '003', '004', '005'],
            caiyangriqi: '',
          },
          {
            yangpin: 'HJ2018001001',
            jiancedian: '监测点一',
            dayinshu: '4',
            caiyanren: ['001', '002', '003', '004', '005'],
            jiancexiagmu: ['001', '002', '003', '004', '005'],
            caiyangriqi: '',
          },
          {
            yangpin: 'HJ2018001001',
            jiancedian: '监测点一',
            dayinshu: '4',
            caiyanren: ['001', '002', '003', '004', '005'],
            jiancexiagmu: ['001', '002', '003', '004', '005'],
            caiyangriqi: '',
          }
        ],
        caiyangrenDataValue: ['001', '002', '003', '004', '005'],
        jiancexiangmu: [
          {
            value: '001',
            label: '氨氮'
          },
          {
            value: '002',
            label: '高锰酸盐'
          },
          {
            value: '003',
            label: 'PH'
          },
          {
            value: '004',
            label: '总磷'
          },
          {
            value: '005',
            label: '化学需氧量'
          },
          {
            value: '006',
            label: '铁'
          },
          {
            value: '007',
            label: '钠'
          },
          {
            value: '008',
            label: '大肠埃希氏菌'
          }
        ]
      }
    },
    computed: {
      ...mapState(['enableStatus', 'tableHeightA', 'yesorno', 'enableStatus', 'caiyangrenData']),
    },
    props: ['newOrEdit', 'canEdit', 'jiancebiaoqian'],
    methods: {
      close() {
        this.$parent.printTableShow = false;
      },
      dayincaiyangren() {

      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .tabName {
    display: inline-block;
    cursor: pointer;
    padding: 0px 15px;
    border: 1px solid #b7b7b7;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: #a9a9a9;
  }

  .activeTab {
    color: #409eff;
  }

  .tabPageContent {}
</style>